<template>
    <div ref="box">
        <div class="scroll-window" v-show="data.length > 0">
            <div class="pb-20 container" id="container">
                <waterfall :col="6" :data="data" :gutterWidth="20" :width="width">
                    <template>
                        <div :class="{'mt-15':index>5}" class="cell-item" v-for="(item,index) in data">
                            <short-item :index="index" :item="item" :muted="muted" @muted="setMuted" @showPop="showPop"></short-item>
                        </div>
                    </template>
                </waterfall>
                <div class="text-center color-fff font-15 width-100% height-50">
                    <el-image :src="require('@/assets/gif/global_loading.gif')" fit="cover" style="width: 40px;height:30px;" v-show="loading"></el-image>
                </div>
            </div>
        </div>
        <div v-show="data.length == 0">
            <!-- <el-image :src="require('@/assets/gif/re-video-loading.gif')" class="fiexd-loading" fit="cover" style="width: 150px; height: 75px"></el-image> -->
        </div>
        <short-pop :creation="creation" :index="choose_index" @next="next" @prev="prev" @setLike="setLike" @setMedia="setMedia" ref="pop"></short-pop>
    </div>
</template>

<script>
import shortPop from '@/components/video/short.vue'
import shortItem from '@/components/short/item'
import store from '@/store'
export default {
    components: {
        shortItem,
        shortPop,
    },
    data() {
        return {
            query: {
                offset: 0,
                limit: 30,
                creation_type: 'short',
            },
            data: [],
            width: 0,
            muted: false,
            loading: false,
            creation: null,
            choose_index: 0,
        }
    },
    mounted() {
        document.title = '陪秀'
        // this.muted = getStorage('muted') ? getStorage('muted') : false
        // this.disable_contr()
        this.width = this.$refs.box.offsetWidth / 6 - 20
        this.getList()
        let box = document.getElementById('container')
        box.addEventListener('scroll', this.scrollInfo)
    },
    destroyed() {
        let box = document.getElementById('container')
        box.removeEventListener('scroll', this.scrollInfo)
    },
    methods: {
        setLike(data) {
            if (data.type != undefined && data.index != undefined) {
                this.data[data.index].liked_count = data.type
                if (data.type) {
                    this.data[data.index].like_count++
                } else {
                    this.data[data.index].like_count--
                }
            }
        },
        showPop(creation) {
            this.creation = creation
            this.$refs.pop.visible = true
            this.choose_index = creation.index
            this.$nextTick(() => {
                this.$refs.pop.init()
            })
        },
        scrollInfo() {
            let e = document.getElementById('container')
            if (e.scrollTop + e.clientHeight >= e.scrollHeight - 50) {
                this.scroll()
            }
        },
        getList() {
            return new Promise(async (resolve, reject) => {
                this.loading = true
                this.$request.get('/creation/pc_index', this.query).then((res) => {
                    res.forEach((item) => {
                        let orgin_width = item.width
                        item.width = Math.round(this.$refs.box.offsetWidth / 6, 2) - 20
                        item.height = item.height ? Math.round((item.height / orgin_width) * item.width, 2) : 160
                    })
                    this.data = this.data.concat(res)
                    this.$store.state.system.loaded = true
                    this.$nextTick(() => {
                        setTimeout(() => {
                            this.loading = false
                        }, 300)
                    })
                    resolve(res)
                })
            })
        },
        next() {
            let next_creation = this.data[this.choose_index + 1]

            if (next_creation) {
                this.creation = next_creation

                this.$nextTick(() => {
                    this.choose_index++
                    this.$refs.pop.switch()

                    // this.$set(this, 'choose_index', this.choose_index++)
                })
                if (this.choose_index + 10 >= this.data.length) {
                    this.query.offset = this.data.length
                    this.getList()
                }
            }
        },
        prev() {
            let prev_creation = this.data[this.choose_index - 1]
            if (prev_creation) {
                this.creation = prev_creation
                this.$nextTick(() => {
                    this.$refs.pop.switch()
                    this.choose_index--
                })
            }
        },
        setMedia(value) {
            this.data[value.index].media_urls = value.value.media_urls
            this.data[value.index].m3u8_media = value.value.m3u8_media
            this.data[value.index].need_pay = 0
            this.$nextTick(() => {
                this.$refs.pop.init()
            })
        },
        setMuted(value) {
            // setStorage('muted',value);
            this.muted = value
        },
        // loadmore(e){
        //     console.log(e)
        // },
        scroll() {
            if (this.loading == true) {
                return false
            }

            this.query.offset = this.data.length
            this.getList().then(() => {})
        },
    },
}
</script>

<style lang="scss" scoped>
// .scroll-window {
//     height: calc(100vh - 50px);
//     overflow-y: scroll;
//     overflow-x: hidden;
// }

// .scroll-window::-webkit-scrollbar {
//     display: none;
// }

.main::-webkit-scrollbar {
    display: none;
}
.fiexd-loading {
    width: 80px;
    height: 40px;
    position: fixed;
    left: 50%;
    top: 45vh;
}
.container {
    height: calc(100vh - 70px);
    overflow-y: scroll;
}
.container::-webkit-scrollbar {
    display: none;
}
</style>